<template>
    <div>
        <div class="main-top" v-loading="loading">
            <el-row :gutter="10" class="el-row-box">
                <el-col :span="8" v-for="item, index in galleryClassList" :key="item.id">
                    <el-card :body-style="{ padding: '0px' }" class="card-box">
                        <el-image fit="cover" :src="item.url" lazy :preview-src-list="[item.url]" :initial-index="0">
                        </el-image>
                        <p>
                            {{ item.name }}
                        </p>
                        <div>
                            <el-checkbox v-if="checked" v-model="item.checked" size="large" @change="changeHandler(item)"/>
                            <el-button type="primary" link @click.stop="nameHandler(item.id)">重命名</el-button>
                            <el-popconfirm width="250" confirm-button-text="是的呢，宝贝儿" cancel-button-text="取消"
                                icon-color="#626AEF" title="你确认要删除这张图片吗" @confirm.stop="removeHandler(item.id)"
                                confirm-button-type="primary">
                                <template #reference>
                                    <el-button type="primary" link>删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!-- 分页区域 -->
        <div class="main-bottom">
            <el-pagination background layout="prev, page, next" :total="total" :current-page="page" :page-size="limit"
                @current-change="getGalleryClassList" />
        </div>
        <!-- 抽屉柜 -->
        <el-drawer v-model="drawer" size="400" :close-on-click-modal="false">
            <template #header>
                <h4>上传图片</h4>
            </template>
            <template #default>
                <upload :data="{ image_class_id }" @success="successHandler"></upload>
            </template>
            <template #footer>
                <div style="flex: auto">

                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup lang='ts'>
import { galleryClassListApi, updateImageNameApi, removeImageApi } from '@/api/gallery'
import { ref, onMounted , computed} from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import upload from '@/components/uploadFile.vue'
// 加载
const loading = ref<boolean>(false)
const page = ref<number>(1)
const activeId = ref(0)
const total = ref(0)
const limit = ref(5)
const image_class_id = ref(0)
// 图库分类列表
const galleryClassList = ref()
// 获取图库
const getGalleryClassList = (p: any) => {
    if (typeof p === 'number') page.value = p

    loading.value = true
    galleryClassListApi(image_class_id.value, page.value, limit.value).then(res => {
        // 总页数给到total
        total.value = res.data.data.totalCount
        galleryClassList.value = res.data.data.list
        loading.value = false
    })
}
const successHandler = () => getGalleryClassList(1)
// 根据Id重新加载图片列表
const loadData = (id: number) => {
    page.value = 1
    image_class_id.value = id
    getGalleryClassList(page.value)
}
// 重命名
const nameHandler = (id: number) => {
    console.log(id);
    ElMessageBox.prompt('请输入图片名称', 'Tip', {
        title: '修改图片名称',
        confirmButtonText: '确认',
        cancelButtonText: '不确认',
    })
        .then(async (value) => {
            const res = await updateImageNameApi(id, value)
            if (res.data.data) {
                ElMessage({
                    type: 'success',
                    message: `已修改图片名称`,
                })
                getGalleryClassList(page.value)
            }
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}
// 删除
const removeHandler = async (id: any) => {
    const list = [id]
    const res = await removeImageApi(list)
    console.log(res);
    if (res.data.data) {
        ElMessage({
            type: 'success',
            message: '删除成功',
        })
        getGalleryClassList(1)
    }

}

// 抽屉开关
const drawer = ref(false)

const drawerHandler = () => {
    drawer.value = true
}
defineExpose({
    loadData,
    drawerHandler
})
// 是否显示多选框
const props = defineProps({
    checked : {
        type : Boolean,
        default : true
    },
    limit : {
        type : Number,
        default : 1
    }
})
const emit = defineEmits(['changeHandler'])
const checkedImage = computed(()=> galleryClassList.value.filter((o:any)=>o.checked))
const changeHandler = (item:any)=>{
  if(item.checked && checkedImage.value.length > props.limit){
    item.checked = false
    return alert(`最多只能选中${props.limit}张`)
  }
  emit("changeHandler",checkedImage.value)
}
</script>
<style lang='scss' scoped>
.main-top {
    position: absolute;
    top: 0;
    bottom: 40px;
    left: 0;
    right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: rgb(193, 159, 159);
    .el-row-box {
        padding: 0 0 0 10px;

        .card-box {
            height: 230px;
            margin-bottom: 15px;
            position: relative;

            .el-image {
                width: 100%;
                height: 200px;
            }

            p {
                height: 30px;
                width: 100%;
                position: absolute;
                top: 170px;
                background-color: rgba(99, 99, 99, .2);
            }

            div {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 30px;
            }
        }
    }
}

.main-bottom {
    position: absolute;
    height: 40px;
    bottom: 0px;
    left: 0;
    background-color: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>